<template>
  <div>

    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="campusName" label="社团名字" width="140"></el-table-column>
      <el-table-column prop="campusScale" label="社团规模（人）">
      </el-table-column>
      <el-table-column prop="campusInfo" label="社团简介" width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="masterName" label="社长"></el-table-column>
      <el-table-column v-if="user.role === 'ROLE_SIMPLE'" label="操作"  width="500" align="center">
        <template slot-scope="scope">
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定取消申请加入此社团吗？"
              @confirm="cancel(scope.row.id,user.id)"
          >
            <el-button type="warning" slot="reference" v-if="user.role === 'ROLE_SIMPLE'">取消申请 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
          
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  name: "User",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      serverIp: serverIp,
      tableData: [],
      total: 0,
      campusName: "",
      form: {},
      multipleSelection: []
    }
  },
  created() {
    this.load()
  },
  methods: {

    cancel(campusId,userId){
      console.log("campusId:"+campusId)
      console.log("userId:"+userId)
      this.request.post("/campus/canceljoin?campusId="+campusId+"&userId="+userId).then(
        res => {
            this.$message.success("取消申请加入社团成功")
            this.load()
        }
      )
    },

    load() {
      this.request.get("/campus/mycjoin?userid="+this.user.id).then(res => {
        this.tableData = res.data
        this.total = res.data.total
      })
      
    },
    
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    }

  }
}
</script>


<style>
.headerBg {
  background: #eee!important;
}
</style>
